<template>
  <!-- 科研项目 -->
  <div class="sciencePc">
    <tabs :index="2"></tabs>
    <div class="list">
      <toNews
        class="item"
        v-for="item in news.list"
        :key="item.id"
        :detail="item"
      >
        <img class="img" :src="item.webimages" />
        <div class="text">
          <div class="title">{{ item.name }}</div>
          <div class="describe">
            {{ item.description }}
          </div>
        </div>
        <div class="detail">
          <div class="t">查看详情</div>
          <img class="ic" src="../../../assets/image/home/ic_right.png" />
        </div>
      </toNews>
    </div>
    <div class="pagination">
      <el-pagination
        background
        layout="prev, pager, next"
        :page-count="news.total"
        @current-change="pageChange"
      />
    </div>
  </div>

  <!-- 移动端 -->
  <div class="scienceMobile">
    <tabs :index="2"></tabs>
    <div class="list">
      <toNews
        class="item"
        v-for="item in news.list"
        :key="item.id"
        :detail="item"
      >
        <img class="img" :src="item.mobileimages" />
        <div class="text">
          <div class="title">{{ item.name }}</div>
          <div class="describe">
            {{ item.description }}
          </div>
        </div>
        <div class="detail">
          <div class="t">查看详情</div>
          <img class="ic" src="../../../assets/image/home/ic_right.png" />
        </div>
      </toNews>
    </div>
    <div class="pagination">
      <div class="more-box" @click="nextPage">
        <div class="text">加载更多</div>
        <img
          class="ic"
          v-if="page < total"
          src="../../../assets/image/publice/bottom-arrow.png"
        />
        <img
          class="ic"
          v-if="page == total"
          src="../../../assets/image/publice/top-arrow.png"
        />
      </div>
    </div>
  </div>
</template>

<script>
import tabs from "./tabs.vue";
import toNews from "@/components/toNews";
export default {
  components: { tabs, toNews },
  data() {
    return {
      news: {
        list: [],
        page: 1,
        total: 1,
      },
    };
  },

  mounted() {
    // 初始化数据
    this.init();
  },
  methods: {
    /**
     * 初始化数据
     */
    async init() {
      // 获取数据
      this.getData();
    },
    /**
     * 更改页数
     */
    async pageChange(e) {
      // 设置页号
      this.news.page = e;

      // 获取数据
      await this.getData();
    },
    /**
     * 科研项目详情
     */
    detail(e) {
      if (e.url) {
        window.open(e.url);
      } else if (e.videofile) {
        window.open(e.videofile);
      } else {
        this.$router.push({
          name: "innovationNew",
          query: {
            id: e.id,
          },
        });
      }
    },
    /**
     * 获取数据
     */
    async getData() {
      // 获取数据
      const result = await this.$request.get(
        "companyinno/scientificProjectPage",
        {
          params: {
            cid: 3,
            page: this.news.page,
            pagenum: 10,
          },
        }
      );
      //移动端
      if (document.body.clientWidth <= 1200) {
        this.news.list = this.news.list.concat(result.data.article);
      } else {
        this.news.list = result.data.article;
      }

      this.news.total = result.data.totalpage;
    },

    /**
     * 加载更多
     */
    nextPage() {
      if (this.news.total != 1 && this.news.page < this.news.total) {
        this.news.page++;
        this.getData();
      } else {
        this.$message("沒有更多数据了");
      }
    },
  },
};
</script>
<style lang="scss" scoped>
@media screen and (min-width: 1200px) {
  .scienceMobile {
    display: none;
  }

  .sciencePc {
    @include fn.fluidContainer;
    padding-bottom: 70px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 92px;
    background: #f8f8f8;

    .pagination {
      margin-top: 60px;
      display: flex;
    }

    .list {
      @include fn.container;
      margin-top: 60px;

      .item {
        position: relative;
        margin-bottom: 20px;
        height: 220px;
        background: #ffffff;
        border-top: 1px solid #fff;
        display: flex;

        &:hover {
          background: #f1f1f1;
          border-top: 1px solid color.$base;
        }

        .detail {
          cursor: pointer;
          position: absolute;
          bottom: 30px;
          right: 40px;
          display: flex;
          align-items: center;

          .t {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-size: 18px;

            font-weight: 400;
            color: color.$base;
          }

          .ic {
            object-fit: fill;
            margin-left: 8px;
            width: 12px;
            height: 12px;
          }
        }

        .img {
          margin-left: 30px;
          margin-top: 25px;
          @include fn.scale(300px);
          // width: 300px;
          // height: 160px;
          object-fit: cover;
        }

        .text {
          margin-top: 38px;
          margin-left: 45px;
          margin-right: 45px;
          flex: 1;
          width: 0;

          .title {
            @include fn.title();
          }

          .describe {
            @include fn.describe(3);
            margin-top: 19px;
          }
        }
      }
    }
  }
}
</style>

<style lang="scss" scoped>
@media screen and (max-width: 1200px) {
  .sciencePc {
    display: none;
  }

  .scienceMobile {
    width: 100%;
    padding-bottom: fn.rpx(70);
    display: flex;
    flex-direction: column;
    align-items: center;

    background: #f8f8f8;

    .pagination {
      display: flex;
      .more-box {
        cursor: pointer;
        margin-top: fn.rpx(92);
        display: flex;
        flex-direction: column;
        align-items: center;

        .text {
          font-size: fn.rpx(16);

          font-weight: 500;
          color: color.$base;
        }

        .ic {
          margin-top: fn.rpx(10);
          width: fn.rpx(24);
          height: fn.rpx(24);
        }
      }
    }

    .list {
      width: fn.rpx(700);
      // margin-top: fn.rpx(80);

      .item {
        width: 100%;
        position: relative;
        margin-top: fn.rpx(20);
        height: fn.rpx(220);
        background: #ffffff;
        display: flex;

        &:hover {
          background: #f1f1f1;
        }

        .detail {
          cursor: pointer;
          position: absolute;
          bottom: fn.rpx(30);
          right: fn.rpx(40);
          display: flex;
          align-items: center;

          .t {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-size: fn.rpx(16);
            color: color.$base;
          }

          .ic {
            object-fit: fill;
            margin-left: fn.rpx(8);
            width: fn.rpx(12);
            height: fn.rpx(12);
          }
        }

        .img {
          margin-left: fn.rpx(30);
          margin-top: fn.rpx(25);

          @include fn.scale(fn.rpx(300));
        }

        .text {
          margin-top: fn.rpx(38);
          margin-left: fn.rpx(40);
          margin-right: fn.rpx(45);
          flex: 1;
          width: 0;

          .title {
            @include fn.title();
          }

          .describe {
            @include fn.describe(3);
            margin-top: fn.rpx(19);
          }
        }
      }
    }
  }
}
</style>